<template>
  <div class="shop-container">
    <!-- 左侧导航栏 -->
    <div class="left-nav">
      <el-menu
        :default-active="$route.path"
        mode="vertical"
        class="shop-menu"
        @select="handleNavSelect"
      >
        <el-menu-item index="/shop/products">
          <i class="iconfont icon-product"></i>
          <span>商品列表</span>
        </el-menu-item>
        <el-menu-item index="/shop/myaccount">
          <i class="iconfont icon-account"></i>
          <span>我的账户</span>
        </el-menu-item>
        <el-menu-item index="/shop/cart">
          <i class="iconfont icon-cart"></i>
          <span>购物车</span>
        </el-menu-item>
        <el-menu-item index="/shop/evaluate">
          <i class="iconfont icon-evaluate"></i>
          <span>互动评价</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <router-view />
    </div>

    <!-- 底部导航栏 -->
    <el-menu
      :default-active="$route.path"
      mode="horizontal"
      class="bottom-nav"
      @select="handleNavSelect"
    >
      <el-menu-item index="/">
        <i class="iconfont icon-home"></i>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item index="/shop">
        <i class="iconfont icon-shop"></i>
        <span>商城</span>
      </el-menu-item>
      <el-menu-item index="/edu">
        <i class="iconfont icon-edu"></i>
        <span>农教</span>
      </el-menu-item>
      <el-menu-item index="/community">
        <i class="iconfont icon-community"></i>
        <span>社区</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const handleNavSelect = (key: string) => {
  router.push(key)
}
</script>

<style scoped>
.shop-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.left-nav {
  width: 240px;
  background: #f5f7fa;
  border-right: 1px solid #eee;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  padding: 20px;
  min-height: calc(100vh - 140px); /* 减去导航栏高度 */
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
  background: #fff;
}
</style>